<template>
  <a-card
    v-bind="cardProps"
    :class="['pro-card', cardClass]"
    :style="cardStyle"
  >
    <!-- 自定义标题 -->
    <template #title v-if="$slots.title || title">
      <div class="pro-card-title">
        <slot name="title">
          <span class="title-text">{{ title }}</span>
          <a-tag v-if="badge" :color="badgeColor" class="title-badge">
            {{ badge }}
          </a-tag>
        </slot>
      </div>
    </template>

    <!-- 自定义操作区 -->
    <template #extra v-if="$slots.extra || showRefresh || showFullscreen">
      <div class="pro-card-extra">
        <slot name="extra" />
        <a-space v-if="showRefresh || showFullscreen">
          <a-button
            v-if="showRefresh"
            type="text"
            size="small"
            :icon="h(ReloadOutlined)"
            :loading="refreshing"
            @click="handleRefresh"
          />
          <a-button
            v-if="showFullscreen"
            type="text"
            size="small"
            :icon="h(fullscreen ? CompressOutlined : ExpandOutlined)"
            @click="toggleFullscreen"
          />
        </a-space>
      </div>
    </template>

    <!-- 卡片内容 -->
    <div class="pro-card-content" :class="{ 'content-loading': loading }">
      <!-- 加载状态 -->
      <a-spin :spinning="loading" :tip="loadingTip">
        <!-- 统计数据展示 -->
        <div v-if="statistic" class="pro-card-statistic">
          <a-statistic
            :title="statistic.title"
            :value="statistic.value"
            :precision="statistic.precision"
            :formatter="statistic.formatter"
            :prefix="statistic.prefix"
            :suffix="statistic.suffix"
            :value-style="statistic.valueStyle"
          />
          <div v-if="statistic.description" class="statistic-description">
            {{ statistic.description }}
          </div>
        </div>

        <!-- 图表容器 -->
        <div v-if="chart" class="pro-card-chart" :style="{ height: chartHeight }">
          <slot name="chart" />
        </div>

        <!-- 默认内容 -->
        <div v-if="!statistic && !chart" class="pro-card-body">
          <slot />
        </div>
      </a-spin>
    </div>

    <!-- 底部操作区 -->
    <template #actions v-if="$slots.actions || actions?.length">
      <slot name="actions">
        <a-space v-if="actions?.length">
          <a-button
            v-for="action in actions"
            :key="action.key"
            :type="action.type"
            :size="action.size"
            :icon="action.icon"
            :loading="action.loading"
            :disabled="action.disabled"
            @click="action.onClick"
          >
            {{ action.text }}
          </a-button>
        </a-space>
      </slot>
    </template>
  </a-card>
</template>

<script setup lang="ts">
import { ref, computed, h } from 'vue'
import type { CardProps } from 'ant-design-vue'
import {
  ReloadOutlined,
  ExpandOutlined,
  CompressOutlined
} from '@ant-design/icons-vue'

interface CardAction {
  key: string
  text: string
  type?: 'primary' | 'default' | 'dashed' | 'link' | 'text'
  size?: 'large' | 'middle' | 'small'
  icon?: any
  loading?: boolean
  disabled?: boolean
  onClick?: () => void
}

interface CardStatistic {
  title: string
  value: number | string
  precision?: number
  formatter?: (value: any) => string
  prefix?: string
  suffix?: string
  valueStyle?: Record<string, any>
  description?: string
}

interface ProCardProps extends Omit<CardProps, 'title'> {
  title?: string
  badge?: string
  badgeColor?: string
  loading?: boolean
  loadingTip?: string
  refreshing?: boolean
  showRefresh?: boolean
  showFullscreen?: boolean
  chart?: boolean
  chartHeight?: string
  statistic?: CardStatistic
  actions?: CardAction[]
  ghost?: boolean
  hoverable?: boolean
  onRefresh?: () => void | Promise<void>
}

const props = withDefaults(defineProps<ProCardProps>(), {
  loading: false,
  loadingTip: '加载中...',
  refreshing: false,
  showRefresh: false,
  showFullscreen: false,
  chart: false,
  chartHeight: '300px',
  ghost: false,
  hoverable: true,
})

const emit = defineEmits<{
  refresh: []
  fullscreenChange: [fullscreen: boolean]
}>()

// 响应式数据
const fullscreen = ref(false)

// 计算属性
const cardProps = computed(() => {
  const { 
    title, badge, badgeColor, loading, loadingTip, refreshing, 
    showRefresh, showFullscreen, chart, chartHeight, statistic, 
    actions, onRefresh, ...rest 
  } = props
  return rest
})

const cardClass = computed(() => {
  return {
    'pro-card-ghost': props.ghost,
    'pro-card-fullscreen': fullscreen.value,
    'pro-card-chart': props.chart,
    'pro-card-statistic': props.statistic,
  }
})

const cardStyle = computed(() => {
  const style: Record<string, any> = {}
  
  if (fullscreen.value) {
    style.position = 'fixed'
    style.top = '0'
    style.left = '0'
    style.right = '0'
    style.bottom = '0'
    style.zIndex = '1000'
    style.margin = '0'
  }
  
  return style
})

// 方法
const handleRefresh = async () => {
  emit('refresh')
  if (props.onRefresh) {
    await props.onRefresh()
  }
}

const toggleFullscreen = () => {
  fullscreen.value = !fullscreen.value
  emit('fullscreenChange', fullscreen.value)
  
  // 处理全屏时的样式
  if (fullscreen.value) {
    document.body.style.overflow = 'hidden'
  } else {
    document.body.style.overflow = ''
  }
}

// 暴露方法
defineExpose({
  refresh: handleRefresh,
  toggleFullscreen,
  isFullscreen: () => fullscreen.value,
})
</script>

<style scoped>
.pro-card {
  transition: all 0.3s ease;
}

.pro-card.pro-card-ghost {
  background: transparent;
  border: none;
}

.pro-card.pro-card-fullscreen {
  border-radius: 0 !important;
}

.pro-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.title-text {
  font-weight: 500;
}

.title-badge {
  margin-left: auto;
}

.pro-card-extra {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pro-card-content {
  position: relative;
}

.content-loading {
  min-height: 100px;
}

.pro-card-statistic {
  text-align: center;
  padding: 16px 0;
}

.statistic-description {
  margin-top: 8px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
}

.pro-card-chart {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pro-card-body {
  min-height: 60px;
}

/* 悬停效果 */
.pro-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .pro-card-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .title-badge {
    margin-left: 0;
  }
  
  .pro-card-extra {
    flex-wrap: wrap;
  }
  
  .pro-card-statistic {
    padding: 12px 0;
  }
}

/* 暗黑模式适配 */
[data-theme="dark"] .pro-card {
  background: var(--color-bgContainer);
  border-color: var(--color-borderSecondary);
}

[data-theme="dark"] .statistic-description {
  color: rgba(255, 255, 255, 0.45);
}
</style>